<template>
  id:<input type="text" v-model="user.id"/>
  姓名:<input type="text" v-model="user.name"/>
  年龄:<input type="text" v-model="user.age"/>
  <button @click="addUser">添加</button>
  <table>
    <tr>
      <th>索引值</th>
      <th>id</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
    <tr v-for="(item, index) in arr" :key="item.id">
      <td>{{ index }}</td>
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td><button @click="delById(item.id)">删除</button></td>
    </tr>
  </table>
</template>
<script setup>
import { reactive } from 'vue'
const arr = reactive([
  { id: 1, name: '张三', age: 20 },
  { id: 2, name: '李四', age: 19 },
  { id: 3, name: '王五', age: 21 }
])
const user = reactive({})
const addUser = () => {
  const obj = {id:user.id, name: user.name, age: user.age}
  arr.push(obj)
  // 清空输入框
  user.id = ''
  user.name = ''
  user.age = ''
}
const delById = id => {
  let new_arr = arr.filter(item => item.id != id)
  // 0：从哪个索引位置去添加或者删除
  arr.splice(0)
  arr.push(...new_arr)
}
</script>
<style scoped></style>